<template>
  <div class="box">
    <div @click="isshow = !isshow">地图数据</div>
    <transition name="slideFade">
      <div v-if="isshow" transiton="slideFade" class="ob"></div>
    </transition>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({});
let emit = defineEmits([""]);
 
const isshow = ref(false);
onMounted(() => {});
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  color: #fff;
}
.slideFade-enter {
  animation: slideFade-dialog-fade-in 0.5s ease;
}
.slideFade-leave {
  animation: slideFade-dialog-fade-out 0.5s ease forwards;
}
.slideFade-enter-active {
  animation: slideFade-dialog-fade-in 0.5s ease;
}
.slideFade-leave-active {
  animation: slideFade-dialog-fade-out 0.5s ease forwards;
}

@keyframes slideFade-dialog-fade-in {
  0% {
    transform: translate3d(
      -100%,
      0,
      0
    ); //修改这个可以控制，上下左右动画，例如：100%为从右到左
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes slideFade-dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
}
.ob {
  width: 700px;
  height: 600px;
  border: 1px solid red;
}
</style>
